<template>
  <div>
    <div class="handle-box" v-if="isOpertions && isShowButton">
      <el-row>
        <el-col>
          <el-button
            v-for="item in tables.operations"
            :key="item.value"
            :type="item.type == '' ? 'primary' : item.type"
            :plain="item.shape == 'plain'"
            :icon="item.icon"
            :round="item.shape == 'round'"
            :circle="item.shape == 'circle'"
            size="mini"
            @click="tableEvent(item)"
            :class="'btn_' + item.shape"
            >{{ item.shape == "circle" ? "" : item.label }}</el-button
          >
        </el-col>
      </el-row>
    </div>
    <div class="handle-box" v-if="isQuery">
      <el-row>
        <el-col :span="8">
          <el-input
            :placeholder="$t('i18n.queryEmpty')"
            v-model="keyword"
            class="input-with-select"
            size="mini"
          >
            <template #append>
              <el-button
                icon="el-icon-search"
                @click="hadleQuery()"
              ></el-button>
            </template>
          </el-input>
        </el-col>
      </el-row>
    </div>
    <div class="el-table-custom-body">
      <el-table
        :data="tables.body"
        style="width: 100%"
        v-loading="loading"
        :border="boder"
        :row-class-name="tableRowClassName"
        :max-height="maxheight > 0 ? maxheight : windowHeight"
        ref="global_table"
        size="mini"
        @sort-change="SortTableChange"
        :header-cell-class-name="CellClass"
        class="global_table"
        :row-style="{ height: '0' }"
        :cell-style="{ padding: '3px' }"
      >
        <el-table-column
          v-if="Select == 'SingeSelect'"
          width="45"
          align="center"
          :fixed="1 == 1"
        >
          <template #default="scope">
            <el-checkbox
              v-model="scope.row.checkBoxResult"
              @change="SingleCheckBoxChange(scope.row)"
            ></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column
          v-if="Select == 'MultiSelect'"
          width="45"
          align="center"
          :fixed="1 == 1"
        >
          <template #header>
            <el-checkbox
              v-model="checkAll"
              :indeterminate="isIndeterminate"
              @change="MultiSelectCheckBoxAllChange"
            ></el-checkbox>
          </template>
          <template #default="scope">
            <el-checkbox
              v-model="scope.row.checkBoxResult"
              @change="MultiSelectCheckChange(scope.row)"
            ></el-checkbox>
          </template>
        </el-table-column>
        <!-- <el-table-column
        v-if="Select == 'SingeSelect' || Select == 'MultiSelect'"
        type="selection"
        width="40"
        align="center"
        ></el-table-column>-->
        <template v-for="item in tables.header">
          <el-table-column
            :show-overflow-tooltip="true"
            :property="item.key"
            :label="item.name"
            :width="
              item.width == 0
                ? ''
                : item.key == 'rowNo'
                ? item.width
                : item.width < 80
                ? 80
                : item.width
            "
            min-width="80px"
            :align="item.align"
            :sortable="item.sorTable"
            :fixed="item.fixed"
            v-if="!item.hide"
            :key="item.key"
          >
            <template #default="scope">
              <el-tag
                size="medium"
                v-if="
                  item.isOtherStyle &&
                    scope.row[scope.column.property] != '' &&
                    scope.row[scope.column.property] != undefined
                "
                :type="scope.row.otherType"
                >{{ scope.row[scope.column.property] }}</el-tag
              >
              <el-tag
                size="medium"
                v-if="
                  item.isTag &&
                    !item.isOtherStyle &&
                    scope.row.row_Style != '' &&
                    scope.row[scope.column.property] != '' &&
                    scope.row[scope.column.property] != undefined
                "
                :type="scope.row.row_Style"
                >{{ scope.row[scope.column.property] }}</el-tag
              >
              <el-tag
                size="medium"
                v-if="
                  item.isTag &&
                    !item.isOtherStyle &&
                    scope.row.row_Style == '' &&
                    scope.row[scope.column.property] !== '' &&
                    scope.row[scope.column.property] != undefined
                "
                >{{ scope.row[scope.column.property] }}</el-tag
              >
              <el-button
                :type="
                  scope.row.row_Style == '' ? 'primary' : scope.row.row_Style
                "
                size="mini"
                v-if="item.isIcon"
                circle
              >
                <i
                  v-if="!item.isSvg"
                  :class="scope.row[scope.column.property]"
                ></i>
                <svg v-else class="flwo_table_icon" aria-hidden="true">
                  <use :xlink:href="scope.row[scope.column.property]" />
                </svg>
              </el-button>
              <span
                :style="{ 'font-weight': scope.row.fontWeight ? 'bolder' : '' }"
                :class="
                  scope.row.enable || scope.row.enable == undefined
                    ? item.hyperlink
                      ? 'btn_text_hyperlink'
                      : 'btn_text'
                    : 'btn_text_diabled'
                "
                :underline="false"
                :disabled="!item.hyperlink"
                v-if="!item.isTag && !item.isIcon"
                :type="
                  scope.row.row_Style == '' ? 'primary' : scope.row.row_Style
                "
                @click="hyperlink(item, scope.row)"
                >{{ scope.row[scope.column.property] }}</span
              >
              <el-popover
                placement="right-start"
                trigger="click"
                v-if="
                  item.isOperation &&
                    scope.row.operations.length > 0 &&
                    isOpertions
                "
              >
                <template #reference>
                  <el-button
                    :type="
                      scope.row.row_Style == ''
                        ? 'primary'
                        : scope.row.row_Style
                    "
                    class="btnTableCss"
                    round
                    size="mini"
                    style="padding:0px 5px"
                  >
                    <i class="el-icon-more"></i>
                  </el-button>
                </template>
                <el-button
                  type="text"
                  v-for="item in scope.row.operations"
                  :key="item.value"
                  :icon="item.icon"
                  :class="
                    item.type == 'danger'
                      ? 'defaultColor_table_Read'
                      : 'defaultColor_table'
                  "
                  @click="tableEvent(item)"
                  >{{ item.label }}</el-button
                >
              </el-popover>
            </template>
          </el-table-column>
        </template>
      </el-table>
    </div>
    <div class="div_pagination" v-if="tables.total > 0">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="Sizes"
        :page-size="pageSize"
        :layout="layout"
        background
        :total="tables.total"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
let windowHeight = parseInt(window.innerHeight);
export default {
  props: {
    isShowButton: { type: Boolean, default: true },
    tables: {
      type: Object,
    },
    Select: {
      type: String,
    },
    layout: {
      type: String,
    },
    loading: { type: Boolean },
    Sizes: { type: Array },
    currentPage: { type: Number },
    pageSize: { type: Number },
    maxheight: { type: Number },
    isQuery: { type: Boolean },
    fieldkey: { type: Object },
    isOpertions: { type: Boolean },
    boder: { type: Boolean, default: true },
  },
  data() {
    return {
      windowHeight: windowHeight,
      tableResult: [],
      query: {},
      hhidepage: false,
      hdSize: 15,
      keyword: "",
      sortField: "",
      isAsc: false,
      hide: "style='display:none'",
      checkAll: false,
      isIndeterminate: false,
      dels: [],
      curs: [],
      primary_key: "",
      tabloading: this.loading,
    };
  },
  methods: {
    tableRowClassName({ rowIndex }) {
      if (rowIndex > 0 && rowIndex % 2 === 1) {
        return "warning-row";
      }
      return "success-row";
    },
    getHeight() {
      // this.tabloading = true;
      if (
        this.maxheight == null ||
        this.maxheight == 0 ||
        this.maxheight == undefined
      )
        this.windowHeight = windowHeight - 290 + "px";
      else this.windowHeight = windowHeight - this.maxheight + "px";
      // setTimeout(() => {
      //   if (
      //     document.getElementsByClassName("is-scrolling-left")[0] != undefined
      //   ) {
      //     let height = document.getElementsByClassName(
      //       "el-table__body-wrapper"
      //     )[0].offsetHeight;
      //     document
      //       .getElementsByClassName("is-scrolling-left")[0]
      //       .setAttribute("style", "height:" + (height - 2) + "px");        }
      //   this.tabloading = false;
      // }, 1000);
    },
    handleSelectionChange(item) {
      if (this.Select == "MultiSelect") this.tableResult = item;
      else {
        this.tableResult = [];
        let it = item.pop();
        this.tableResult.push(it);
        // 单选
        if (item.length > 0) {
          this.$refs.global_table.clearSelection();
          this.$refs.global_table.toggleRowSelection(it);
        }
      }
    },
    ///单选时
    SingleCheckBoxChange(data) {
      this.tables.header.forEach((element) => {
        if (element.type === "primary_key") this.primary_key = element.key;
      });
      this.tables.body.forEach((element) => {
        if (element[this.primary_key] !== data[this.primary_key])
          element.checkBoxResult = false;
      });
      this.tableResult = [data];
    },

    ///多选全选时
    MultiSelectCheckBoxAllChange(data) {
      this.isIndeterminate = false;
      if (data) {
        this.tables.body.forEach((element) => {
          element.checkBoxResult = true;
          this.MultiSelectCheckChange(element);
        });
      } else {
        this.tables.body.forEach((element) => {
          element.checkBoxResult = false;
          this.MultiSelectCheckChange(element);
        });
      }
    }, ///多选选中时
    MultiSelectCheckChange(data) {
      this.tables.header.forEach((element) => {
        if (element.type === "primary_key") this.primary_key = element.key;
      });
      if (data.checkBoxResult) {
        let arr = this.tableResult.filter(
          (item) => item[this.primary_key] == data[this.primary_key]
        );
        if (arr.length == 0) this.tableResult.push(data);
        let arr1 = this.curs.filter(
          (item) => item[this.primary_key] == data[this.primary_key]
        );
        if (arr1.length == 0) this.curs.push(data);
        let deltes = this.dels.filter(
          (item) => item[this.primary_key] !== data[this.primary_key]
        );
        this.dels = [];
        this.dels = deltes;
        if (this.curs.length == 0) {
          this.checkAll = false;
          this.isIndeterminate = false;
        } else {
          if (this.tables.body.length == this.curs.length) {
            this.checkAll = true;
            this.isIndeterminate = false;
          } else {
            this.checkAll = false;
            this.isIndeterminate = true;
          }
        }
      } else {
        let arr = this.dels.filter(
          (item) => item[this.primary_key] == data[this.primary_key]
        );
        if (arr.length == 0) this.dels.push(data);

        let res = this.tableResult.filter(
          (item) => item[this.primary_key] != data[this.primary_key]
        );
        this.tableResult = [];
        this.tableResult = res;
        let cu = this.curs.filter(
          (item) => item[this.primary_key] != data[this.primary_key]
        );
        this.curs = [];
        this.curs = cu;
        if (this.curs.length > 0) {
          this.checkAll = false;
          this.isIndeterminate = true;
        } else {
          this.checkAll = false;
          this.isIndeterminate = false;
        }
      }
    },
    handleSizeChange(val) {
      this.query.page = 1;
      this.query.pageSize = val;
      this.hdSize = val;
      this.query.keyWord = this.keyword;
      this.query.isAsc = this.isAsc;
      this.query.sortField = this.sortField;
      this.curs = [];
      this.$emit("PageChange", this.query);
    },
    handleCurrentChange(val) {
      if (this.hdSize === this.pageSize) this.query.page = val;
      else this.query.page = 1;
      this.query.pageSize = this.hdSize;
      this.query.keyWord = this.keyword;
      this.query.isAsc = this.isAsc;
      this.query.sortField = this.sortField;
      this.curs = [];
      this.$emit("PageChange", this.query);
    },
    ///按查询条件加载
    hadleQuery() {
      this.query.page = 1;
      this.query.pageSize = this.hdSize;
      this.query.keyWord = this.keyword;
      this.query.isAsc = this.isAsc;
      this.query.sortField = this.sortField;
      this.curs = [];
      this.$emit("PageChange", this.query);
    },
    ///表单事件
    tableEvent(item) {
      this.$emit("tableEvent", { data: item, key: this.fieldkey });
    },
    ///超链接事件
    hyperlink(row, data) {
      if (row.hyperlink) {
        this.$emit("hyperLinekEvent", { row: row, data: data });
      }
    },
    ////排序时调用
    SortTableChange(col) {
      this.query.page = 1;
      this.query.pageSize = this.hdSize;
      this.query.keyWord = this.keyword;

      if (col.order === "descending") {
        this.isAsc = false;
      } else {
        this.isAsc = true;
      }
      this.query.isAsc = this.isAsc;
      this.sortField = col.prop;
      this.query.sortField = col.prop;
      this.$emit("PageChange", this.query);
    },
    CellClass(row) {
      if (this.Select !== "MultiSelect" && row.columnIndex == 0) {
        return "disabledchecked";
      }
    },
    ///初始化复选框
    InitCheckBox(cks, key, riKey) {
      let rightKey = riKey == undefined ? key : riKey;

      ///获取主键Key
      this.tables.header.forEach((element) => {
        if (element.type === "primary_key") this.primary_key = element.key;
      });

      ////将数据组装到结果集合中
      cks.forEach((element) => {
        let tabs = this.tableResult.filter(
          (item) => item[rightKey] === element[key]
        );
        if (tabs.length == 0) {
          var ts = this.tables.body.filter(
            (item) => item[rightKey] === element[key]
          );
          if (ts.length > 0) this.tableResult.push(ts[0]);
        }
      });
      ///给复选框赋值
      this.tableResult.forEach((element) => {
        let deletes = this.dels.filter(
          (item) => item[this.primary_key] === element[this.primary_key]
        );
        if (deletes.length == 0) {
          let bodys = this.tables.body.filter(
            (item) => item[this.primary_key] === element[this.primary_key]
          );
          if (bodys.length > 0) bodys[0].checkBoxResult = true;
          let cuss = this.curs.filter(
            (item) => item[this.primary_key] === element[this.primary_key]
          );
          if (cuss.length == 0) {
            var ts1 = this.tables.body.filter(
              (item) => item[this.primary_key] === element[this.primary_key]
            );
            if (ts1.length > 0) this.curs.push(ts1[0]);
          }
        }
      });
      if (this.curs.length == 0) {
        this.checkAll = false;
        this.isIndeterminate = false;
      } else {
        if (this.tables.body.length == this.curs.length) {
          this.checkAll = true;
          this.isIndeterminate = false;
        } else {
          this.checkAll = false;
          this.isIndeterminate = true;
        }
      }
    },
  },
  mounted() {
    window.addEventListener("resize", this.getHeight);
    this.getHeight();
  },
};
</script>
<style lang="less">
.el-table .warning-row {
  background: rgb(198, 226, 255);
}

.el-table .success-row {
  background: #ffffff;
}
.el-table .el-default-row {
  background: #ffffff;
}


.el-table-custom-body {
  .el-radio__label {
    display: none;
  }
}
.div_pagination {
  margin: 10px 0px 10px 10px;
  text-align: right;
}
.table_headl_class {
  background: rgb(121, 187, 255);
}
.btnTableCss {
  min-height: 14px;
  font-size: 14px;
  padding: 0px 5px;
  margin-left: 2px;
  margin-top: 5px;
}
.defaultColor_table {
  width: 100%;
  text-align: left;
  padding: 0px;
  margin-left: 10px;
}
.defaultColor_table_Read {
  color: #ff0000;
  width: 100%;
  text-align: left;
}
.btn_circle span {
  margin: 0px;
}
.el-link.el-link--default.is-disabled {
  color: #818181;
}
.el-link.is-disabled {
  cursor: pointer;
}
.hide {
  display: none;
}
.disabledchecked .el-checkbox__input {
  display: none;
}
.global_table {
  .el-button--text.is-disabled,
  .el-button--text.is-disabled:focus,
  .el-button--text.is-disabled:hover {
    border-color: transparent;
    color: #909399;
    cursor: pointer;
  }
  .btn_text {
    background: none;
    border: none;
    color: #909399;
    cursor: pointer;
    padding: 0;
    margin: 0;
    font-size: 14px;
  }
  .btn_text:hover {
    background: none;
    border: none;
    color: #909399;
    cursor: pointer;
    padding: 0;
    margin: 0;
  }
  .btn_text_diabled {
    background: none;
    border: none;
    color: #f56c6c;
    cursor: pointer;
    padding: 0;
    margin: 0;
    font-size: 14px;
  }
  .btn_text_diabled:hover {
    background: none;
    border: none;
    color: #f56c6c;
    cursor: pointer;
    padding: 0;
    margin: 0;
    text-decoration: underline;
  }
  .btn_text_hyperlink {
    background: none;
    border: none;
    color: #409eff;
    cursor: pointer;
    padding: 0;
    margin: 0;
    font-size: 14px;
  }
  .btn_text_hyperlink:hover {
    background: none;
    border: none;
    color: #409eff;
    cursor: pointer;
    padding: 0;
    margin: 0;
    text-decoration: underline;
  }
  .el-tooltip__popper {
    max-width: 20px;
  }
  .el-tooltip__popper,
  .el-tooltip__popper.is-dark {
    background: rgb(48, 65, 86) !important;
    color: #fff !important;
    line-height: 24px;
  }
}
</style>
